<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

.bookProduct {
  text-align: center;
  font-size: 1rem;
  line-height: 2.4rem;
}
.spaceStyle {
  width: 100%;
  height: 0.5rem;
  background-color: #f3f5f9;
}


.spana{width:89px;display:block;}
.spanb{color:red;width:10px;height:10px;}
.textar{border: 1px solid #dfdfdf;
  width: 90%;
  min-height: 5rem;
  padding: .2rem;
  margin: 0 auto;
}


.xinxi{
    padding: 0.9rem 0.7rem 0;
    text-align: left;
    font-size: 1rem;

   margin-bottom: 0.6em;
}

.btn-submit{
  padding: 1em;
}
</style>



<template>
  <div >
    <div class="bookProduct"><p>您正在预约：<span id="productName">{{block.name}}</span></p></div>
    <div class="spaceStyle"></div>
    <div>
      <x-input title="" placeholder="请输入姓名" v-model="uname" required>
        <span slot="label" class="spana"><span class="spanb">*</span>联系人</span>
      </x-input>
      <x-input title="" placeholder="请输入联系方式" mask="999 9999 9999" v-model="mobile" :max="13" is-type="china-mobile" required>
        <span slot="label" class="spana"><span class="spanb">*</span>联系电话</span>
      </x-input>
      <x-input title="" placeholder="请输入验证码" label-width="89px" v-model="verifyCode" >
        <span slot="label" class="spana"><span class="spanb">*</span>验证码</span>
        <!-- <x-button slot="right" type="primary" mini>发送验证码</x-button> -->
        <img slot="right-full-height" :src="imgUrl" @click="getVerify">
      </x-input>
      <popup-picker  :data="cities"  placeholder="请选择地区" v-model="city" show-name @on-change="onChange" required>
        <template slot="title" slot-scope="props">
          <span :class="props.labelClass" :style="props.labelStyle" style="height:24px;" required>
            <span slot="label" class="spana"><span class="spanb">*</span>所在地区</span>
          </span>
        </template>
      </popup-picker>
      <x-input title="楼宇名称" placeholder="请输入您所在的楼宇名称" v-model="building_name" required>
        <span slot="label" class="spana"><span class="spanb">*</span>楼宇名称</span>
      </x-input>
      <x-input title="详细地址" placeholder="请输入楼层及房号" v-model="addr" required>
        <span slot="label" class="spana"><span class="spanb">*</span>详细地址</span>
      </x-input>
      <x-input title="企业名称" placeholder="请输入企业名称" v-model="comp_name">
        <span slot="label" class="spana"><span class="spanb"></span>企业名称</span>
      </x-input>
     
      <x-textarea  title="备注" placeholder="请输入备注信息" v-model="descp">
        <span slot="label" class="spana"><span class="spanb"></span>备注</span>
      </x-textarea>
    

    </div>
    <div class="btn-submit">
        <div class="fillBotton"><p class="xinxi">注“<span class="spanb">*</span>”为必填信息</p></div>
        
        <x-button type="primary" :gradients="['#1D62F0', '#19D5FD']" @click.native="onSubmit">提交预约</x-button>
    </div>
  </div>
  
</template>


<script>
import {
  XButton,
  XInput,
  Group,
  PopupPicker,
  XTextarea
} from "vux";
export default {
  data() {
    return {
      cities: [],
      city: [],
      block:{},
      uname:'',
      mobile:'',
      city_code:'',
      building_name:'',
      addr:'',
      comp_name:'',
      descp:'',
      loading:false,
      imgKey:'',
      verifyCode:'',
      imgUrl:'https://ws1.sinaimg.cn/large/663d3650gy1fq684go3glj203m01hmwy.jpg'
    };
  },
  computed:{
    host() {
      console.log("remote", this.$store.state.main.host);
      return this.$store.state.main.host;
    }
  },
  mounted(){
    document.body.scrollTop=0;
    let id=this.$route.params.id;
    this.block=this.$blocks.find(x=>x.id==id)
    
    this.getCities();
    this.getVerify();
  },
  methods: {
    onChange(value){
      this.city_code=value[0];
    },
    onSubmit(){
      if (isEmpty([this.uname,this.mobile,this.city_code,this.building_name,this.addr,this.verifyCode])) {
        this.$vux.toast.show({
          type: "warn",
          text: "请填写必要信息"
        });
        return;
      }
      
      this.loading=true;
      this.$store.dispatch("orderAdd", {
        uname:this.uname,
        mobile:this.mobile.replace(/ /g, ""),
        city_code:this.city_code,
        building_name:this.building_name,
        addr:this.addr,
        comp_name:this.comp_name,
        descp:this.descp,
        busi_id:this.block.id,
        busi_name:this.block.name,
        imgKey:this.imgKey,
        verifyCode:this.verifyCode
      }).then(resp => {
        this.loading=false;
        let ret=resp.data
        if(ret.errCode!="0"){
          this.$vux.toast.show({
            type: "warn",
            text: ret.message
          });
          return;
        }
        this.$router.push({ name: "Result" });
      });
    },
    getVerify(){
      this.imgKey=Math.random()
      this.imgUrl=this.host+'/getVerify?key='+this.imgKey;
    },
    getCities(){
      this.$store.dispatch("cities").then(resp=>{
        let arr=[[]];
        resp.data.items.map(x=>{
          x.value=x.code;
          arr[0].push(x)
        })
        this.cities=arr
      })
    }
  },
  components: {
   
    XButton,
  
    XInput,
    Group,
    PopupPicker,
    XTextarea
  }
};
</script>

